<template>
  <layout title="text文本">
    <layout-content title="文本尺寸">
      <view class="title tn-text-xs tn-flex-col-between tn-padding-sm tn-cool-bg-6 tn-radius tn-shadow-blur">
        <view class="value">图鸟UI</view>
        <view class="size">xs</view>
      </view>
      <view class="title tn-text-sm tn-flex-col-between tn-padding-sm tn-cool-bg-6 tn-radius tn-shadow-blur">
        <view class="value">图鸟UI</view>
        <view class="size">sm</view>
      </view>
      <view class="title tn-text-md tn-flex-col-between tn-padding-sm tn-cool-bg-6 tn-radius tn-shadow-blur">
        <view class="value">图鸟UI</view>
        <view class="size">md</view>
      </view>
      <view class="title tn-text-lg tn-flex-col-between tn-padding-sm tn-cool-bg-6 tn-radius tn-shadow-blur">
        <view class="value">图鸟UI</view>
        <view class="size">lg</view>
      </view>
      <view class="title tn-text-xl tn-flex-col-between tn-padding-sm tn-cool-bg-6 tn-radius tn-shadow-blur">
        <view class="value">图鸟UI</view>
        <view class="size">xl</view>
      </view>
      <view class="title tn-text-xxl tn-flex-col-between tn-padding-sm tn-cool-bg-6 tn-radius tn-shadow-blur">
        <view class="value">图鸟UI</view>
        <view class="size">xxl</view>
      </view>
      <view class="title tn-text-xl-xxl tn-flex-col-between tn-padding-sm tn-cool-bg-6 tn-radius tn-shadow-blur">
        <view class="value">图鸟UI</view>
        <view class="size">xl-xxl</view>
      </view>
    </layout-content>

    <layout-content title="文本颜色(使用图鸟内置颜色值)">
      <view class="title tn-flex-col-between tn-padding-sm tn-radius tn-shadow">
        <view class="value tn-col-12 tn-text-left">默认</view>
      </view>
      <view class="title tn-flex-col-between tn-padding-sm tn-radius tn-shadow tn-color-red">
        <view class="value tn-col-12 tn-text-left">red</view>
      </view>
      <view class="title tn-flex-col-between tn-padding-sm tn-radius tn-shadow tn-color-red--light">
        <view class="value tn-col-12 tn-text-left">red-light</view>
      </view>
      <view class="title tn-flex-col-between tn-padding-sm tn-radius tn-shadow tn-color-red--disabled">
        <view class="value tn-col-12 tn-text-left">red-disabled</view>
      </view>
      <view class="title tn-flex-col-between tn-padding-sm tn-radius tn-shadow tn-color-red--dark">
        <view class="value tn-col-12 tn-text-left">red-dark</view>
      </view>
    </layout-content>

    <layout-content title="对齐方式">
      <view class="title tn-flex-col-between tn-padding-sm tn-cool-bg-6 tn-radius tn-shadow-blur">
        <view class="value tn-col-12 tn-text-left">左对齐</view>
      </view>
      <view class="title tn-flex-col-between tn-padding-sm tn-cool-bg-6 tn-radius tn-shadow-blur">
        <view class="value tn-col-12 tn-text-center">居中对齐</view>
      </view>
      <view class="title tn-flex-col-between tn-padding-sm tn-cool-bg-6 tn-radius tn-shadow-blur">
        <view class="value tn-col-12 tn-text-right">右对齐</view>
      </view>
    </layout-content>

    <layout-content title="文本截断">
      <view class="title tn-flex-col-between tn-padding-sm tn-cool-bg-6 tn-radius tn-shadow-blur">
        <view class="value tn-col-12 tn-text-ellipsis-1">图鸟UI，是基于uni-app进行开发的UI框架，提供丰富的组件进行快速开发，已经支持H5和微信小程序，包含常用表单组件、信息展示组件等，并提供丰富的酷炫页面模板。</view>
      </view>
      <view class="title tn-flex-col-between tn-padding-sm tn-cool-bg-6 tn-radius tn-shadow-blur">
        <view class="value tn-col-12 tn-text-ellipsis-2">图鸟UI，是基于uni-app进行开发的UI框架，提供丰富的组件进行快速开发，已经支持H5和微信小程序，包含常用表单组件、信息展示组件等，并提供丰富的酷炫页面模板。</view>
      </view>
      <view class="title tn-flex-col-between tn-padding-sm tn-cool-bg-6 tn-radius tn-shadow-blur">
        <view class="value tn-col-12 tn-text-ellipsis-3">图鸟UI，是基于uni-app进行开发的UI框架，提供丰富的组件进行快速开发，已经支持H5和微信小程序，包含常用表单组件、信息展示组件等，并提供丰富的酷炫页面模板。</view>
      </view>
    </layout-content>

    <layout-content title="文本处理">
      <view class="title tn-flex-col-between tn-padding-sm tn-cool-bg-6 tn-radius tn-shadow-blur">
        <view class="value tn-text-cap">abc首字母大写</view>
      </view>
      <view class="title tn-flex-col-between tn-padding-sm tn-cool-bg-6 tn-radius tn-shadow-blur">
        <view class="value tn-text-upper">abc全部大写</view>
      </view>
      <view class="title tn-flex-col-between tn-padding-sm tn-cool-bg-6 tn-radius tn-shadow-blur">
        <view class="value tn-text-lower">AbC全部小写</view>
      </view>
    </layout-content>
  </layout>
</template>

<script lang="ts" setup>
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
</script>

<style lang="scss" scoped>
.title {
  position: relative;
  margin-top: 20rpx;
  animation: enterAnimation 0.25s ease-out 1 forwards;
  transform: translateX(-200%);

  @for $i from 1 through 10 {
    &:nth-child(#{$i}) {
      animation-delay: 0.1s * $i;
    }
  }
  .value,.size {
    position: relative;
  }
}

@keyframes enterAnimation {
  0% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(0%);
  }
}
</style>
